<script setup lang="ts">

import {darkTheme, lightTheme, ThemeCommonVars} from "naive-ui";
import {useAppStore} from "@/stores";

const appStore = useAppStore();
const themeVars: ThemeCommonVars = appStore.darkTheme ? darkTheme.common : lightTheme.common;
</script>

<template>
  <n-el
      :style="{backgroundColor: themeVars.tableColor}"
      class="app-loading"
      wh-full absolute
  >
    <n-space
        vertical
        justify="center"
        :size="48"
        h-full items-center
    >
      <n-icon size="140">
        <template v-if="appStore.darkTheme">
          <icon-meteocons:fog-night/>
        </template>
        <template v-else>
          <icon-meteocons:fog-day/>
        </template>
      </n-icon>
      <n-icon size="48" :color="themeVars.primaryColor">
        <icon-eos-icons:bubble-loading/>
      </n-icon>
    </n-space>
  </n-el>
</template>

<style scoped lang="scss">
</style>
